<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
			body {
				color: #808080;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000;
				margin: 0px;
				overflow: hidden;

			}

			#info {
				position: absolute;
				left: 0px;
				top: 10px;
				width: 100%;
				padding: 5px;
				z-index: 1;
				color: #ddd;
				text-shadow: 0 0 1px rgba(0,0,0,1);
				text-align: left;
				font-size: 20px;
			}

			a {
				color: #0080ff;
			}

			b { color: lightgreen }

			.renderer_label {
				position: absolute;
				bottom: 1em;
				width: 100%;
				color: white;
				z-index: 10;
				display: block;
				text-align: center;
			}
			.renderer_label.renderer_label_normal {
			}
			.renderer_label.renderer_label_logzbuf {
			}
			#container {
				white-space: nowrap;
			}
			#container_normal {
				width: 50%;
				display: inline-block;
				position: relative;
				overflow: hidden;
			}
			#container_logzbuf {
				width: 50%;
				display: inline-block;
				position: relative;
				overflow: hidden;
			}
			#renderer_border {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 2px;
				z-index: 10;
				opacity: .8;
				background: #ccc;
				border: 1px inset #ccc;
				cursor: col-resize;
			}
			box {
			  --divwidth: 500px;
			  --divhight: 500px;
			}
			#main{position: absolute;top: 10%;left: 10%;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
			#title{width: 300px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;color:#FFFFFF;font-size:14px}
			#content{border: #85ABE4 1px solid;border-top: none;width: 300px;height:  150px;float:left;}
			#content{background: url(res/sh.jpg) no-repeat;}
			#vtitle{width: 405px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;color:#FFFFFF;font-size:14px}
			#vcontent{border: #85ABE4 1px solid;border-top: none;width: 400px;height:  230px;float:left;}
			#vcontent{background: url(res/sh.jpg) no-repeat;}
			#off{float: right;cursor: pointer;}
			.none{display: none;}
			.show{display: block;}
			#open{background: #fff;border: #555 1px solid;height: 13px;width: 50px;position: absolute;left: 50px;top: 400px;cursor: pointer;}
			#open marquee{font-size: 12px;color: #555;}
			#img{background: url(res/s.jpg) no-repeat;float: right;width: 49px;height: 19px;}
			#img: hover{background: url(res/sh.jpg) no-repeat;}
			#ten{float: left;width: 200px;}
			#popupdiv
			{
				width:300px;
				height:150px;
				position:absolute;
				z-index:1000;
				border:1px ;
				background: #0BB9DF;
				color:#000;
				padding:5px;
				filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8
			}
			.divitem{width:80px;text-align:right;float:left;color:#00FF7F;}
	</style>
	<link href="./css/pleasure3D.css" rel="stylesheet" />
	<script src="./js/jquery-2.2.4.min.js"></script>
	<script src="./js/three.js"></script>
  <script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.js"></script>
  <script src="/lib/vertx/vertx-eventbus.js"></script>
	<!--
	<script src="./js/three.js"></script>
	-->
	<script src="./js/stats.min.js"></script>
	<script src="./js/OrbitControls.js"></script>
	<script src="./js/ThreeBSP.js"></script>
	<script src="./js/curves/NURBSCurve.js"></script>
	<script src="./js/curves/NURBSSurface.js"></script>
	<script src="./js/curves/NURBSUtils.js"></script>
	<script src="./js/Tween.min.js"></script>
	<script src="./js/CSS3DRenderer.js"></script>
	<script src="./js/lrUtils.js"></script>
	<script src="pleasure3D.js"></script>
	<script src="pleasuredata.js"></script>

	<script langue="javascript">

	/*
	var vcanvas = null;
	var context = null;
	var clockImage = new Image();
	window.onload = function() {
		vcanvas = document.getElementById('myCanvaiis');
		context = vcanvas.getContext('2d');
		//vcanvas.z-index=2000;

		var clockImageLoaded = false;
		clockImage.onload = function () {
			clockImageLoaded = true;
		}
		clockImage.src = 'mng/clock.jpg';

		context.drawImage(clockImage, vcanvas.width/2* -1, vcanvas.height/2 * -1, vcanvas.width, vcanvas.height);

		context.translate(vcanvas.width / 2, vcanvas.height / 2);
        setInterval('createClock()', 1000);
	}

	function drawHand(size, thickness) {
        thickness = thickness || 4;

        context.beginPath();
        context.moveTo(0, 0); // center
        context.lineTo(thickness * -1, -10);
        context.lineTo(0, size * -1);
        context.lineTo(thickness, -10);
        context.lineTo(0, 0);
        context.fill();

		context.closePath();

		context.stroke();


    }

	function drawHourHand(theDate) {
        var hours = theDate.getHours() + theDate.getMinutes() / 60;
        var degrees = (hours * 360 / 12) % 360;

        context.save();
        context.fillStyle = 'black';

        context.rotate(degreesToRadians(degrees));

        drawHand(110, 7);

        context.restore();
    }

	function drawSecondHand(theDate) {
        context.save();

        context.fillStyle = 'red';

        var seconds = theDate.getSeconds();
        context.rotate(degreesToRadians(seconds * 6));

        drawHand(150);

        context.restore();

		context.font = "bold " + 28 + "px Arial" ;
        context.lineWidth = 3;
		context.fillText("231:"+theDate.getSeconds(), vcanvas.width/6, 22);
    }

	function degreesToRadians(degrees) {
        return (Math.PI / 180) * degrees;
    }

	function createClock() {
        context.drawImage(clockImage, vcanvas.width/2* -1, vcanvas.height/2 * -1, vcanvas.width, vcanvas.height);

		var theDate = new Date();
        drawHourHand(theDate);
		drawSecondHand(theDate);
		//threeStart()
    }
	<canvas id="myCanvaiis" width="400" height="400" style="z-index:1001;" >
	  Your browser does not support canvas
	</canvas>
	*/
  var ebTrail=new EventBus("http://localhost:8082/eventbus");
  ebTrail.enableReconnect(true);
  ebTrail.onopen=function(){//监听数据
    ebTrail.registerHandler("chat.to.server",function(err,msg){
      console.log(msg.body);//在这里对接收的数据进行一些操作
    });
    ebTrail.publish("chat.to.server","{\"name\":\"zhangsan\"}");//这行代码可以发送信息给服务端
  };
	</script>

</head>
<body onload="threeStart()" >
<div id="canvas-frame" class="canvas_frame" ></div>

<div id="info">
  <a href="javascript:void(0)" onclick="closeDiv('popupdiv')">点击关闭层</a>
	<!--
	<br/>
	<a href="javascript:void(0)" id="show" onclick="show('main',false,true,null,null)">点击打开弹出层！</a>
	 -->
</div>


<div id="main" class="none">
<div id="title" onclick="closeDiv('main')">设备实时数据
<div id="ten" onclick="closeDiv('main')"></div>
<div id="img" title="关闭" onclick="closeDiv('main')" ></div>
</div>
<div id="content" style="">
	<div style="float:center"><div class="divitem">设备名称：</div><input type="text" id="item1" value="allen" /></div>
	<div style="float:center"><div class="divitem">类型：</div><input type="text" id="item1" name="fname" value="allen" /></div>
	<div style="float:center"><div class="divitem">IP：</div><input type="text" id="item1" name="fname" value="allen" /></div>
	<div style="float:center"><div class="divitem">设备详情：</div><input type="text" id="item1" name="fname" value="allen" /></div>
</div>
</div>
<!--
<div id="popupdiv" style="display:none;">
	<div id="title">
	<div id="ten"></div>
	<div id="img" title="关闭" onclick="closeDiv('popupdiv')"></div>
	</div>
	<div id="content">

		<br/>
		<span>number <br/>实时数据</span>
		<br/>
		<select id="instanceCount">
			<option>100</option>
			<option>500</option>
			<option selected>1000</option>
			<option>2000</option>
			<option>3000</option>
			<option>5000</option>
			<option>10000</option>
			<option>20000</option>
			<option>30000</option>
			<option>50000</option>
			<option>100000</option>
		</select>

		</div>


</div>
-->

</body>
</html>
